<div class="toolbar">
    <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="refresh()">
            <span nz-icon nzType="reload" [nzSpin]="loading"></span>
            刷新
        </button>

        <!--搜索框-->
        <ng-container *ngIf="showSearch()">
            <div *nzSpaceItem class="search">
                <form (submit)="search()">
                    <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
                        <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone:true}" nz-input
                               placeholder="请输入关键字"/>
                    </nz-input-group>
                    <ng-template #suffixButton>
                        <button nz-button nzType="primary" nzSearch (click)="search()">搜索</button>
                    </ng-template>
                </form>
            </div>
        </ng-container>

        <!--插槽-->
        <ng-content></ng-content>
    </nz-space>

    <div class="fill"></div>

    <!--按钮区-->

    <nz-space>
        <ng-container *ngFor="let b of buttons">
            @if (b.link) {
                <button *nzSpaceItem nz-button nzType="primary" nzShape="round" [title]="b.title || ''"
                        [routerLink]="b.link()">
                    <span *ngIf="b.icon" nz-icon [nzType]="b.icon"></span>
                    {{ b.label }}
                </button>
            } @else if (b.action) {
                <button *nzSpaceItem nz-button nzType="primary" nzShape="round" [title]="b.title || ''"
                        (click)="b.action()">
                    <span *ngIf="b.icon" nz-icon [nzType]="b.icon"></span>
                    {{ b.label }}
                </button>
            } @else {
                <button *nzSpaceItem nz-button nzType="primary" nzShape="round" [title]="b.title || ''">
                    <span *ngIf="b.icon" nz-icon [nzType]="b.icon"></span>
                    {{ b.label }}
                </button>
            }
        </ng-container>
    </nz-space>

</div>


<nz-table #table
          nzSize="small"
          [nzData]="datum"
          [nzLoading]="loading"
          [nzShowPagination]="true"
          [nzShowTotal]="totalTemplate"
          [nzFrontPagination]="false"
          [nzPageIndex]="pageIndex"
          [nzPageSize]="pageSize"
          [nzTotal]="total"
          [nzShowQuickJumper]="true"
          [nzShowSizeChanger]="true"
          (nzQueryParams)="onQuery($event)">
    <thead>
    <tr>
        <th *ngFor="let item of columns"
            [nzColumnKey]="item.key"
            [nzShowSort]="item.sortable"
            [nzSortFn]="true"
            [nzShowFilter]="!!item.filter"
            [nzFilterFn]="true"
            [nzFilters]="item.filter || []">
            {{ item.label }}
        </th>
        <th *ngIf="operators && operators.length">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of table.data">

        <td *ngFor="let item of columns" [nzEllipsis]="item.ellipsis" [nzBreakWord]="item.break">
            @if (item.date) {
                {{ data[item.key] | date: 'yyyy-MM-dd HH:mm:ss' }}
            } @else if (item.link) {
                <a [routerLink]="item.link(data)">{{ data[item.key] }}</a>
            } @else {
                {{ data[item.key] }}

            }
        </td>

        <td *ngIf="operators && operators.length">
        <span class="operator" *ngFor="let o of operators">

            @if (o.link) {
                @if (o.external) {
                    <a [title]="o.title||''" target="_blank" [routerLink]="o.link(data)">
                        <i *ngIf="o.icon" nz-icon [nzType]="o.icon"></i>{{ o.label }}
                    </a>
                } @else {
                    <a [title]="o.title||''" [routerLink]="o.link(data)">
                        <i *ngIf="o.icon" nz-icon [nzType]="o.icon"></i>{{ o.label }}
                    </a>
                }
            } @else if (o.action) {
                @if (o.confirm) {
                    <a [title]="o.title||''" nz-popconfirm [nzPopconfirmTitle]="o.confirm"
                       (nzOnConfirm)="o.action(data)">
                        <i *ngIf="o.icon" nz-icon [nzType]="o.icon"></i>{{ o.label }}
                    </a>
                } @else {
                    <a [title]="o.title||''" (click)="o.action(data)">
                        <i *ngIf="o.icon" nz-icon [nzType]="o.icon"></i>{{ o.label }}
                    </a>
                }
            }
        </span>
        </td>
    </tr>
    </tbody>
</nz-table>

<ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
